<template>
	<view class="layout">
		<view class="header">
			<!-- 具名插槽 -->
			<slot name="header"></slot>
		</view>
		<view class="main">
			<!-- 具名插槽 -->
			<slot name="main"></slot>
		</view>
		<view class="footer">底部区域</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.layout {
	.header {
		height: 100px;
		background: linear-gradient(-30deg,rgb(255,255,255),#7FFFD4);
	}
	.main {
		min-height: 400px;
	}
	.footer {
		height: 120px;
		background: linear-gradient(-30deg,rgb(107,175,240),rgb(255,255,255));
	}
}
</style>